<template>
	<view class="bg-white">
		<cu-custom bgColor="bg-blue" :isBack="true">
			<block slot="content">标签</block>
		</cu-custom>
		<view class="text-ABC label-text">#{{ labelName }}</view>
		<view class="bg-blue lamb-line"> </view>
		<view class="content cu-list bg-white">
			<view class="cu-item flex padding solid-bottom item-box" v-for="(item, index) in imagesPageInfo.records"
				:key="index" @click="toImageDetails(item.id)">
				<image :src="item.url" mode="aspectFill" class="flex-sub shadow radius margin-right-xs item-image"
					@click.stop="previewImage(item.url)"></image>
				<view class="action flex-twice content-box">
					<view class="text-bold nowrap">{{ item.title }}</view>
					<view class="text-sm text-gray desc-box">{{ item.description }}</view>
				</view>
			</view>
		</view>
		<view class="padding text-center text-gray" v-show="showNoMore">没有更多内容了哦......</view>
	</view>
</template>

<script>
	import {
		fetchImagesByLabelNameApi
	} from "../../api/http.js";
	import {
		checkTokenInStore
	} from "../../permission/index";
	export default {
		data() {
			return {
				labelName: "",
				imagesPageInfo: {
					current: 1,
					size: 10,
					records: [],
					total: 0,
				},
				showNoMore: false,
			};
		},
		onLoad: function(option) {
			this.labelName = option.name;
			checkTokenInStore();
			this.refreshImages();
		},
		onPullDownRefresh() {
			this.refreshImages();
			uni.stopPullDownRefresh();
		},
		onReachBottom() {
			if (
				this.imagesPageInfo.current * this.imagesPageInfo.size >=
				this.imagesPageInfo.total
			) {
				this.showNoMore = true;
				return;
			}
			this.fetchImages({
				page: this.imagesPageInfo.current + 1,
				limit: this.imagesPageInfo.size,
				labelName: this.labelName,
			});
		},
		methods: {
			cutLongText() {
				this.imagesPageInfo.records.forEach(item => {
					if (item.description.length > 70) {
						item.description = item.description.substring(0, 72) + '...';
					}
				});
			},
			fetchImages(param) {
				fetchImagesByLabelNameApi(param).then((res) => {
					const _info = res.data;
					this.imagesPageInfo.current = _info.current;
					this.imagesPageInfo.size = _info.size;
					this.imagesPageInfo.records = this.imagesPageInfo.records.concat(
						_info.records
					);
					this.imagesPageInfo.total = _info.total;
					this.cutLongText();
				});
			},
			refreshImages() {
				this.imagesPageInfo = {
					current: 1,
					size: 10,
					records: [],
					total: 0,
				};
				this.fetchImages({
					page: this.imagesPageInfo.current,
					limit: this.imagesPageInfo.size,
					labelName: this.labelName,
				});
			},
			toImageDetails(id) {
				uni.navigateTo({
					url: "../image_details/image_details?id=" + id,
				});
			},
		},
	};
</script>

<style lang="scss">
	.label-text {
		display: block;
		height: 150rpx;
		line-height: 150rpx;
		text-align: center;
		font-size: 35rpx;
		font-weight: bold;
	}

	.lamb-line {
		height: 4rpx;
	}

	.item-box {
		height: 200rpx;

		.item-image {
			height: 150rpx;
		}

		.content-box {
			width: 400rpx;
			.nowrap {
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
			}
		}
	}
</style>
